<template>
    <div class="whole">
        <div class="form">
            <div class="logo-container">
                <img class="logo-image" src="@/assets/picture/logo.ico" height="50px">
                <h1 class="logo-text">开店申请</h1>
            </div>
            <div class="form-item">
                <span class="word">店铺名称：</span>
                <el-input v-model="shopnameInput" :class="{illegal_input: isInputIllegal[0]}" class="input" placeholder="请输入店名" />
            </div>
            <div class="form-item">
                <span class="word">所售商品类型：</span>
                <el-input v-model="shoppingtypeInput" :class="{illegal_input: isInputIllegal[1]}" class="input" placeholder="请输入所售商品类型" />
            </div>
            <div class="form-item">
                <span class="word">商店简介：</span>
                <el-input v-model="shopintroductionInput" :class="{illegal_input: isInputIllegal[2]}" class="input" :rows="2" type="textarea" placeholder="请输入商店简介"/>
            </div>
            <div class="form-item">
                <span class="word">备案地址：</span>
                <el-input v-model="shopadressInput" :class="{illegal_input: isInputIllegal[3]}" class="input" placeholder="请输入商店备案地址" />
            </div>
            <div class="form-item">
                <span class="word">注册资金：</span>
                <el-input v-model="shopcapitalInput" :class="{illegal_input: isInputIllegal[4]}" class="input" placeholder="请输入商店注册资金,单位千元" />
            </div>
            <el-button @click="UserOpenShopApply" type="primary" round style="width: 200px;">立即申请开店</el-button>
            <div class="form-item">
                <h5 style="margin: 0 auto;">在管理员审核通过后即可在个人主页查看店铺信息</h5>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import router from '@/router/index';
import { ref,watch } from 'vue';
import axios from 'axios';

const shopnameInput = ref('')
const shoppingtypeInput = ref('')
const shopintroductionInput = ref('')
const shopadressInput = ref('')
const shopcapitalInput = ref('')


const isInputIllegal:Boolean[] = Array(5).fill(true)

watch(shopnameInput,(newValue)=>{
    const regex = /^.{0,12}$/;
    isInputIllegal[0]=!regex.test(newValue)
})
watch(shoppingtypeInput,(newValue)=>{
    const regex = /^.{0,200}$/;
    isInputIllegal[1]=!regex.test(newValue)
})
watch(shopintroductionInput,(newValue)=>{
    const regex = /^.{0,200}$/;
    isInputIllegal[2]=!regex.test(newValue)
})
watch(shopadressInput,(newValue)=>{
    const regex = /^.{0,100}$/;
    isInputIllegal[3]=!regex.test(newValue)
})
watch(shopcapitalInput,(newValue)=>{
    const regex = /^[1-9]\d*$/;
    isInputIllegal[4]=!regex.test(newValue.toString())
})
const UserOpenShopApply = async ()=>{
    for(let i=0;i<isInputIllegal.length;i++){
        if(isInputIllegal[i]){
            alert('数据不合法!请重新输入')
            return;
        }
    }
    try{
        const response=await axios.post("/api/user/applyshop",{
            sname:shopnameInput,
            sintroduction:shopintroductionInput,
            saddress:shopadressInput,
            scapital:shopcapitalInput,
            uid:JSON.parse(localStorage.getItem('user_info')!).userId.toString()
        })
        if(response.data.success){
            console.log('申请成功')
            alert('申请成功，即将返回首页')
            setTimeout(()=>{
                router.push('/')
            },3000)
        }
        else{
            console.log('申请失败')
        }
    }
    catch(error){
        console.error('程序抛出异常')
    }
    
}
</script>
<style scoped lang="css">
@import "./form.css";
.illegal_input{  
    --el-input-border-color: red;
    --el-input-focus-border-color: red;
    --el-border-color-hover: red;
}
</style>